<template>
	<view>
		<view class="bw-tabs">
			<text class="left">问题类型</text>
			<text class="iconfont icon-qianjinxiayige right"></text>
		</view>

		<view class="bw-select">
			<view v-for="(a_item,a_index) in selects" :key="a_index" @click="getIndex(a_item)"
				:class="{'active':a_item.select == true}">
				<text>{{a_item.report_txt}}</text>
			</view>
		</view>

		<view class="bw-tabs" style="border: none;">
			<text class="left">问题和意见</text>
		</view>

		<view class="bw-textarea">
			<textarea placeholder="在这里填写你的问题,尽量描述清楚自己的情况.不建议提对比性问题,例如:A和B哪个好？" v-model="req.description"></textarea>
		</view>

		<text class="bw-title">上传图片</text>
		<upload @imgNum="getNum" @Success="then" @Fail="fail" :imgnum="num" @Complete="complete" :formData="formData"
			:header="header" @deleteImg="deleteImg"></upload>

		<view style="height:200rpx;">
			<button class="bw-affirm" @click="affirm">确认</button>
		</view>
	</view>
</template>

<script>
	import upload from '../../../components/bw-upload/bw-upload.vue';
	import {
		reportconfig,
		report
	} from '../../../api/mine.js';
	export default {
		components: {
			upload
		},
		data() {
			return {
				imgList: [], //举报图片
				num: 2, //最大上传数
				formData: {},//上传文件所携带的参数
				header: { //上传图片的token
					'Authorization': ''
				},
				selects: [],
				req: {
					page: 1, //当前页码
					limit: 20, //每页数据条数（默认20）
					report_id: [], //举报类型
					user_phone: '', //用户手机号
					description: '', //举报描述
					image_url: [], //举报图片
				}
			}
		},
		mounted() {
			this.feedbacks();
		},
		methods: {
			async feedbacks() {
				try {
					const relus = await reportconfig(this.req);
					for (var i = 0; i < relus.data.data.length; i++) {
						this.selects.push({
							select: false,
							create_time: relus.data.data[i].create_time,
							report_txt: relus.data.data[i].report_txt,
							id: relus.data.data[i].id
						})
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			//img返回的数量
			getNum(e) {
				console.log(e);
			},
			//图片上传成功
			then(e) {
				const th_is = this;
				th_is.imgList.push(e);
				th_is.req.image_url.push(e.then.data);
			},
			//失败
			fail(e) {
				console.log(e);
			},
			//被移除图片的下标
			deleteImg(e) {
				this.req.image_url = [];
				const imgs = this.imgList.filter(item => item.gather.code !== e.code);
				for (var i = 0, len = imgs.length; i < len; i++) {
					this.req.image_url.push(imgs[i].then.data);
				}
			},
			// 不管成功失败都会执行
			complete(e) {
				console.log(e);
			},
			getIndex(a_item) {
				var arr = new Array();
				if (a_item.select == true) {
					a_item.select = !a_item.select;
				} else {
					arr = this.selects.filter(item => item.select == true);
					if (arr.length < 4) {
						a_item.select = !a_item.select;
					} else {
						uni.showToast({
							title: '投诉类型最多选择4个',
							icon: 'none',
							duration: 2000
						});
					}
				}
			},
			//确认
			async affirm() {
				try {
					this.selects.filter(item => item.select == true ? this.req.report_id.push(item.id) : console.log(
						'不符合'));
					const res = await report({
						report_id: this.req.report_id.toString(), //举报类型
						user_phone: '', //用户手机号
						description: this.req.description, //举报描述
						image_url: this.req.image_url.toString() //举报图片
					});
					if (res.status == 200) {
						uni.showToast({
							title: '投诉成功，感谢您的反馈！',
							icon: 'none',
							duration: 2000
						});
					}
					console.log(res);
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "../../../iconfont.scss";

	.bw-tabs {
		width: 95%;
		height: 90rpx;
		margin: 0px auto;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			padding-left: 10rpx;
			font-size: 30rpx;
			font-weight: 500;
		}

		.right {
			padding-right: 10rpx;
			font-size: 40rpx;
		}
	}

	.bw-textarea {
		textarea {
			width: 85%;
			padding-top: 30rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			background-color: #eef2f7;
			border-radius: 10rpx;
			margin: 15rpx auto;
			font-size: 28rpx;
			color: #888889;
		}
	}

	.bw-affirm {
		width: 95%;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50rpx;
		background-color: #f1b9cd;
		color: #FFFFFF;
		position: fixed;
		bottom: 10px;
		left: 20rpx;
	}

	.bw-title {
		font-size: 30rpx;
		padding-bottom: 20rpx;
		padding-left: 30rpx;
		padding-top: 50rpx;
		font-weight: 500;
		display: block;
	}

	.bw-select {
		width: 85%;
		padding: 40rpx;
		margin: 0px auto;
		background-color: #eef2f7;
		border-radius: 20rpx;
		display: flex;
		flex-wrap: wrap;

		view {
			color: #888889;
			margin-left: 10rpx;
			margin-top: 20rpx;
			padding: 10rpx;
			border-radius: 50rpx;
			border: 1px solid #7eb8ff;
			padding-left: 20rpx;
			padding-right: 20rpx;

			text {
				font-size: 27rpx;
			}
		}
	}

	.active {
		background-color: #7eb8ff;
		color: #FFFFFF !important;
	}
</style>
